Level 1
<!DOCTYPE html>
<html>
<head>
<title>level 1</title>
</head>
<body><div style="color : red;">
<h1 >helow my name is rahul verma </h1>
</div>
</body>
</html>
<!-- INLINE CSS EXAMPLE-->
<!DOCTYPE html>
<html>
<head>
<title>level 1</title>
</head>
<body>
<h1 style="color : PINK">helow my name is rahul verma </h1>
</body>
</html>
<!-- INTERNAL CSS EXAMPLE (<STYLE TAG>)-->
<!DOCTYPE html>
<html>
<head>
<title>
internal css using style tag
</title>
<style>
h1{
color : green ;
}
</style>
</head>
<body>
<h1>my </h1>
<h1>name </h1>
<h1> is</h1>
<h1>rahul</h1>
</body>
</html>
<!-- External stylesheet example-->
<!DOCTYPE htm>
<html>
<head>
<title>
External css exaple
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> my name is rahul verma </h1>
<h1> hyper text markup language</h1>
<h1 style="color : yellow ;">cascading stylesheet </h1>
</body>
</html>
7.css
h1 {
color : red;
}
body{
background-color: pink;
}
button{
color : blue;
background-color : yellow;
}
7.html
<!-- External stylesheet example-->
<!DOCTYPE htm>
<html>
<head>
<title>
External css exaple
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> my name is rahul verma </h1>
<h1> hyper text markup language</h1>
<h1 style="color : yellow ;">cascading stylesheet </h1>
<button>click me</button>
</body>
</html>
UNIVERSAL SELECTOR
<!-- External stylesheet example-->
<!DOCTYPE htm>
<html>
<head>
<title>
External css exaple
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> my name is rahul verma </h1>
<h1> hyper text markup language</h1>
<h1>cascading stylesheet </h1>
<button>click me</button>
</body>
</html>
7.CSS
*{
color: blue;}
7.CSS
H1{
COLOR: BLUE ;
BACKGROUND-COLOR : GRAY;
}
1.HTML
<!--ELMETENT SELECTOR EXAMPLE-->
<!DOCTYPE htm>
<html>
<head>
<title>
ELEMENT SELECTOR
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> my name is rahul verma </h1>
<h1> hyper text markup language</h1>
<h1>cascading stylesheet </h1>
<button>click me</button>
</body>
</html>
7.css
#a{
COLOR: GREEN;
}
#b{
COLOR: RED;
}
#c{
COLOR: yellow;
}
#d{
COLOR: purple;
}
n.html
<!--ID SELECOTOR EXAMPLE-->
<!DOCTYPE html>
<html>
<head>
<title>
ID SELCECTO EXAMPLE
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1 id="a"> my name is rahul verma </h1>
<h1 id="b"> hyper text markup language</h1>
<h1 id="c">cascading stylesheet </h1>
<button ID="d">click me</button>
</body>
</html>
7.css
#a{
COLOR: GREEN;
}
.b{
COLOR: RED;
}
#d{
COLOR: purple;
}
n.html
<!--class SELECOTOR EXAMPLE-->
<!DOCTYPE html>
<html>
<head>
<title>
class SELCECTO EXAMPLE
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1 id="a"> my name is rahul verma </h1>
<h1 class="b"> hyper text markup language</h1>
<h1 class="b">cascading stylesheet </h1>
<button ID="d">click me</button>
</body>
</html>
7.css
/*Q1. create a simple div with an id "box" add some test contain inside the div set its backgroumnd color to blue */
#box{
background-color: blue;
}
7.html
<!-- pratical set 1-->
<!--create a simple div with an id "box" add some test contain inside the div set its backgroumnd color to blue-->
<!DOCTYPE html>
<htm>
<head>
<title>
practice set problem 1
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div>
<h1 id="box">
my name is rahul verma .
</h1>
</div>
</body>
</htm>
7.css
/* Q2. create a headings with h1,h2,h3 a give them all a class "heading" & set color of heading read. */
.heading{
color: red;
/* border: 5px solid green; width : 300px;
background-color : pink; */
}
/* h1,h2,h3{
color : blue;
} */
7.html
<!-- pratical set 1-->
<!--Q2. create a headings with h1,h2,h3 a give them all a class "heading" & set color of heading read. -->
<!DOCTYPE html>
<htm>
<head>
<title>
practice set problem 2
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1 class="heading">this is a heading first </h1>
<h2 class="heading">this is a heading second</h2>
<h3 class="heading ">this is a heading third</h3>
</body>
</htm>
7.css
/* Q3.create a button & set its background color
* green using css stylesheet
* blue using style tag
* pink using inline style */
button{
background-color: green;
}
/* button {
border: 5px solid orange;
} */
7.html
<!-- pratical set 1-->
<!-- Q3.create a button & set its background color
* green using css stylesheet
* blue using style tag
* pink using inline style -->
<!DOCTYPE html>
<htm>
<head>
<title>
practice set problem 3
</title>
<link rel="stylesheet" href="7.css">
<style>
button
{background-color: blue; }</style>
</head>
<body>
<button style="background-color: pink;">inline css</button>
</body>
</htm>
7.css
/* my pratics
/* Q3.create a button & set its background color
* green using css stylesheet
* blue using style tag
* pink using inline style */
#css{
background-color: green;
}
/* button {
border: 5px solid orange;
} */
7.html
<!-- pratical set 1-->
<!-- Q3.create a button & set its background color
* green using css stylesheet
* blue using style tag
* pink using inline style -->
<!DOCTYPE html>
<htm>
<head>
<title>
practice set problem 3
</title>
<link rel="stylesheet" href="7.css">
<style>
#style
{background-color: blue; }</style>
</head>
<body>
<button id="css">using ccs stylesheet </button><br><br>
<button id="style"> usin style tag</button><br><br>
<button style="background-color: pink;">inline css</button>
</body>
</htm>
7.css
/* Text properties */
/* text-align -> right,center,left */
h1{
text-align: left
}
h2{
text-align: center;
}
h3{
text-align: right;
}
7.html
<!--Text properties-->
<!--text-align -> right,center,left-->
<!DOCTYPE html>
<htm>
<head>
<title>
test-aligh eg
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<b><u><h1>my</h1></u></b>
<b><u><h2>name</h2></u></b>
<b><u><h3>is </h3></u></b>
</body>
</htm>
7.css
/* according to new version css3 */
/* Text properties */
/* text-align -> right,center,left */
h1{
text-align: start
}
h2{
text-align: center;
}
h3{
text-align: end;
}
7.html
<!--Text properties-->
<!--text-align -> right,center,left-->
<!DOCTYPE html>
<htm>
<head>
<title>
test-aligh eg
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<b><u><h1>my</h1></u></b>
<b><u><h2>name</h2></u></b>
<b><u><h3>is </h3></u></b>
</body>
</htm>
7.css
/* according to new version css3 */
/* Text properties */
/* text-align -> right,center,left */
h1{
text-decoration: underline;
}
h2{
text-decoration: overline;
}
h3{
text-decoration: line-through;
}
7.html
<!--Text properties-->
<!--text-decoration -> underlin,overline,line-through-->
<!DOCTYPE html>
<htm>
<head>
<title>
test-aligh eg
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1>underline</h1>
<h2>overline</h2>
<h3>line-through</h3>
</body>
</htm>
7.css
/* according to new version css3 */
/* Text properties */
/* text-align -> none */
a{
text-decoration: none;
}
7,hmtl
<!--Text properties-->
<!--text-decoration -> none example-->
<!DOCTYPE html>
<htm>
<head>
<title>
test-aligh eg
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<a href="https://www.google.com">google.com</a>
</body>
</htm>
7.css
/* Text properties */
/* text-decoration */
a{
text-decoration: red wavy line-through;
}
7.html
<!--Text properties-->
<!--text-decoration -> color wavy underline example-->
<!DOCTYPE html>
<htm>
<head>
<title>
test-aligh eg
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<a href="https://www.google.com">google.com</a>
</body>
</htm>
7.css
/* Text properties */
/* font-weight eg-> normal,bold,bolder,lighter*/
/* using id selector */
#h1{
font-weight: norml;
}
#h2{
font-weight: lighter;
}
#p2{
font-weight: bolder;
}
#p1{
font-weight: bold;
}
7.html
<!--Text properties-->
<!--font-weight -> normal,weight,bold,bolder-->
<!DOCTYPE html>
<htm>
<head>
<title>
font weight eg -> normal,bold,bolder,lighter
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1 id="h1">normal </h1>
<h2 id="h2">lighter</h1>
<p id="p1">bold</p>
<p id="p2">bolder</p>
</body>
</htm>
7.CSS
/* Text properties */
/* font-weight eg-> normal,bold,bolder,lighter*/
/* using id selector */
#h1{
font-weight:100;
}
#h2{
font-weight: 300;
}
#p2{
font-weight: 700;
}
#p1{
font-weight:900;
}
7.HTML
<!--Text properties-->
<!--font-weight -> normal,weight,bold,bolder-->
<!DOCTYPE html>
<htm>
<head>
<title>
font weight eg -> normal,bold,bolder,lighter
</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1 id="h1">normal </h1>
<h2 id="h2">lighter</h1>
<p id="p1">bold</p>
<p id="p2">bolder</p>
</body>
</htm>
FONT FAMILI
<!DOCTYPE html>
<html>
<head>
<title>
font-family eg
</title>
<link rel="stylesheet" href="7.css">
</head>
<p id="p1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, doloribus?
</p><hr> <br><br>
<p id="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas.
</p>
</html>
7.css
#p1{
font-family: segoe ui black;
}
#p2{
font-family: cursive;
}
7.html
<!DOCTYPE html>
<html>
<head>
<title>
font-size: 10 px;
</title>
<link rel="stylesheet" href="7.css">
</head>
<p id="p1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, doloribus?
</p><hr> <br><br>
<p id="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas.
</p>
</html>
7.css
#p1{
font-family: segoe ui black;
font-size: 100pz;
}
#p2{
font-family: cursive;
font-size: 30px;
}
7.html
font-size example
<!DOCTYPE html>
<html>
<head>
<title>fone-size eg in px</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<p id="c">25 pxc language is develop by denish riche </p>
<p id="html">50px html is stander form is hyter text markup language</p>
<p id="oops"> 100px oop is methodology and pradigm to deshign a program usign class and object.</p>
</body>
</html>
7.css
#c{
font-size: 25px;
}
#html{
font-size: 50px;
}
#oops{
font-size : 100px;
}
Output
7.css
#c{
font-size: 25px;
line-height: 20px;
}
#html{
font-size: 50px;
line-height: normal;
}
#oops{
font-size : 30px;
line0-height: 30px
}
7.html
<!DOCTYPE html>
<html>
<head>
<title>line-height example</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<p id="c">20 pxc language is develop by denish riche for creating system applicaton such as driver kernel ext. c language is also know a mother language. which are define the following way .mother language,procedure oriented programming language,Structure programming language </p>
<p id="html">normal html is stander form is hyter text markup language Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro maxime tempora quod, veniam error incidunt consectetur dolorum a temporibus necessitatibus!</p>
<p id="oops"> 30px oop is methodology and pradigm to deshign a program usign class and object.it is spacifies the software developer maintain by provding the same concept and define blow .</p>
</body>
</html>
Output
<!DOCTYPE html>
<html>
<head>
<title>transfrom-size example </title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<p id="p1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, aperiam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, dolores ipsa ipsum nesciunt in qui esse iure? Obcaecati, quia modi. </p>
<p id="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi beatae obcaecati delectus. Quaerat quas ipsam nam eos dolores laborum repellat, nobis incidunt obcaecati quod?</p>
<p id="p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, soluta iure quod sit fugit libero, hic assumenda, aliquam voluptatem dolores sint autem ducimus labore. Sit quam repellendus in quae optio?</p>
<p id="p4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis assumenda, quis molestias quaerat architecto ducimus aut neque velit consequatur quam optio libero nobis quibusdam voluptas dignissimos porro nesciunt! Sit perspiciatis ut autem tempore nobis ipsum at.</p>
</body>
</html>
7.css
#p1{font-family: Bahnschrift SemiBold SemiConden;
font-size: 25px;
line-height:25px;
text-transform: uppercase;
}
#p2{font-family: "Lucida Handwriting";
font-size: 25px;
line-height:25px;
text-transform: lowercase;
}
#p3{font-family: Freestyle Script;
font-size: 25px;
line-height:25px;
text-transform: capitalize;}
#p4{font-family: Kristen ITC;
font-size: 25px;
line-height:25px;
text-transform: none;}
output
7.html
<!—Q2.Set the font family of all the content in the document to “ Times New Roman”. -->
<!DOCTYPE html>
<html>
<head>
<title>transfrom-size example </title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1 > rahul verma</h1>
</body>
</html>
7.css
/* Q1. Create a heading cented on the page with all of its text capitilized by default. */
h1{
text-align: center;
text-transform: capitalize;
}
Output
<!-- Q3. Create a one dive inside another div
*Set id & text "outer" for the first one & inner for the second one
*Set the outer div text size to 25px & inner div text size to 10px
-->
<!DOCTYPE html>
<html>
<head>
<title>transfrom-size example </title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div id="outer">
my name is rahul
<div id="inner">
my name is aman
</div>
</div>
</body>
</html>
7.css
#outer{
font-size: 25px;
}
#inner{
font-size: 10px;
}
Output
7.html
<!-- height example-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> height</h1>
<h2>width</h2>
</body>
</html>
7.css
/* height example */
h1{
height: 100px;
background-color : lightblue;
}
Output
7.html
<!-- width example-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> height</h1>
<h2>width</h2>
</body>
</html>
7.css
/* width example */
h1{
width: 100px;
background-color : lightblue;
}
Output
7.html
<!-- border example-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> height</h1>
<h2>width</h2>
</body>
</html>
7.css
/* border example */
h1{
width: 300px;
text-align: center;
background-color : lightblue;
border-width: 3px;
border-style: dashed;
border-color: blue;
}
Output
7.html
<!-- shorted border example-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="7.css">
</head>
<body>
<h1> height</h1>
<h2>width</h2>
</body>
</html>
7.css
/*shorted border example */
h1{
width: 300px;
text-align: center;
background-color : lightblue;
border: 5px dotted red;
}
Output
7.html
<!DOCTYPE html>
<!--border radius exmple-->
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>border-radius example</title>
</head>
<body> <br><br>
<div class="my" >
1
</div><br><br>
<div class="my">
2
</div><br><br>
<div class="my">
3
</div>
</body>
</html>
7.css
.my{
width: 100px;
height: 100px;
font-size: 20px;
font-family: cursive;
font-weight: bolder;
text-decoration: underline;
text-align: center;
text-transform: uppercase;
background-color: pink;
border: 5px solid blue;
border-radius: 50%;
}
Output
Padding example
7.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>padding example</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div>
database is a collection of realated daa
</div>
</body>
</html>
-7.css
div{
width: 80px;
height: 80px;
border: 5px solid saddlebrown;
border-radius: 2px;
padding-left: 20px;
padding-top: 40px;
padding-bottom: 40px;
padding-right: 20px;
}
Output
Shorthand padding example
<!DOCTYPE html>
<html lang="en">
<head>
<title>padding example</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div class="my">
div1
</div>
<br><br>
<div class="fy">
div 2
</div>
</body>
</html>
7.css
.my {
width: 140px;
height: 140px;
background-color : pink;
font-family: cursive;
font-size: 20px;
font-weight: bolder;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
border: 5px solid red;
border-radius: 5px;
padding : 20px 60px 20px 10px;
}
.fy{
width: 300px;
height: 300px;
font-family: cambria;
font-size: 30px;
font-weight: lighter;
text-decoration: line-through;
text-transform: uppercase;
border: 6px dotted blue;
border-radius: 50%;
background-color : lawngreen;
padding : 150px;
}
Output
<!DOCTYPE html>
<html lang="en">
<head>
<title>padding example</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div class="my">
div1
</div>
<br><br>
<div class="fy">
div 2
</div>
</body>
</html>
7.css
.my {
width: 140px;
height: 140px;
background-color : pink;
font-family: cursive;
font-size: 20px;
font-weight: bolder;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
border: 5px solid red;
border-radius: 5px;
margin : 20px 60px 20px 10px;
}
.fy{
width: 300px;
height: 300px;
font-family: cambria;
font-size: 30px;
font-weight: lighter;
text-decoration: line-through;
text-transform: uppercase;
border: 6px dotted blue;
border-radius: 50%;
background-color : lawngreen;
margin: 10%;
}
Output
<!DOCTYPE html>
<html lang="en">
<head>
<title>padding example</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div class="my">
div1
</div>
</body>
</html>
7.css
.my {
width: 140px;
height: 140px;
background-color : pink;
border: 5px solid red;
border-radius: 5px;
margin-left:400px;
padding: 0px 0px 0px 400px;
}
Ouput
7.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>padding example</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div>
</div>
</body>
</html>
7.css
div{
width: 100px ;
height: 100px;
background-color : green ;
border-radius: 50% ;
}
Output
Que 2.
<!-- create a follwing navbar -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>navigation</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div id="navbar">
<a id="logo">amozon.in</a>
<a href="#">Account</a>
<a href="#">My Cart</a>
<a href="#">Contant us</a>
<input placeholder="search amozon.in" id="text" type="text">
<button>search</button>
</div>
</body>
</html>
7.css
*{
padding : 0px;
margin : 0px;
color: white;
text-decoration: none;
}
#navbar{
background-color : #0f1111;
height : 60px;
}
#logo{
color : orange;
padding-right: 200px;
font-size: 25px;
}
button{
background-color : #f08804;
}
input{
color : black;
}
a{
padding-right : 200px;
}
/* body{
background-color: rgb(61, 2, 70);
} */
Output
include comment area part
Using inline display properties example’s
7.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>inline,block,</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<div id="div1">
using iznline display property
</div>
<div id="div2">
without using inline display property
</div>
</body>
</html>
7.css
#div1{
border: 2px dashed magenta;
display: inline;
}
div{
border: 6px dotted aqua;
}
Output
7.html
<!-- display : block ; propeties example -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>inline,block,</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<a id="button1">
using display : block properties
</a>
<a id="button2">
using display : block properties
</a>
</body>
</html>
7.css
/* bloack display properties example */
#button1{
background-color: skyblue ;
display : block;
}
#button2{
background-color: pink ;
}
Output
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>Document</title>
</head>
<body>
<h1> this is a box </h1><br><br><br>
<div id="div1"> div 1 </div>
<div id="div2"> div 2 </div>
<div id="div3"> div 3 </div>
</body>
</html>
7.CSS
/* kishi bhi div mai inline display set karene pare padding top or bottom se apply nhi hoti hai for example */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
OUTPUT
7.html
<!-- using inline block -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>using inline block</title>
</head>
<body>
<h1> this is a box </h1><br><br><br>
<div id="div1"> div 1 </div>
<div id="div2"> div 2 </div>
<div id="div3"> div 3 </div>
</body>
</html>
7.css
/* using inline property */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline-block;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
Output
<!-- using display : none -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>using inline block</title>
</head>
<body>
<h1> this is a box </h1><br><br><br>
<div id="div1"> div 1 </div>
<div id="div2"> div 2 </div>
<div id="div3" class="my"> div 3 </div>
</body>
</html>
7.css
/* using display : none property */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline-block;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
.my{
display: none;
}
Ouptput
7.html
<!-- using display : none -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>using inline block</title>
</head>
<body>
<h1> this is a box </h1><br><br><br>
<div id="div1"> div 1 </div>
<div id="div2" class="my"> div 2 </div>
<div id="div3" > div 3 </div>
</body>
</html>
7.css
/* using visibility : hidden ; propertiy */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline-block;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
.my{
visibility: hidden;
}
Output
7.html
<!-- alpgha channel -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>using inline block</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
7.css
div{
width: 100px;
height : 100px;
margin-right: 100px;
display: inline-block;
}
#div1{
background-color: rgba(0,0,255,.25);
}
#div2{
background-color: rgba(0,0,255,.40);
}
#div3{
background-color: rgba(0,0,255,1);
}
Output
7.html
<!-- level 2 -->
<!-- create a web page layout with a header , a footer & a content area containing 3 div set the height & width of divs to 100px.
(add th4e previous navbar in the header) -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Question 1</title>
<link rel="stylesheet" href="7.css">
</head>
<body>
<header >
<div id="navar">
<a class="a" id="logo"> amozon </a>
<a class="a"> Contact no</a>
<a class="a"> Cart to</a>
<a class="a"> Information</a>
<input type="text" id="imput">
<button> Search</button>
</div>
</header>
<div id="my">
<h1 id="heading">
this is a color full box collection
</h1>
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
</div>
<footer>
copy right : <br>
help with you:
</footer>
</body>
</html>
7.css
/* body{
background-image: url(th.jpeg);
background-size:100%;
} */
header{
#navar{
color: white;
height: 50px;
background-color: #000000;
#logo{
color: orange;
font-size: 25px;
}
}
}
button{
background-color: yellow;
}
.a{
padding-right: 100px;
}
#div1{
width: 60px;
height: 60px;
background-color: rgba(25,50,100,1);
}
#div2{
width: 60px;
height: 60px;
background-color: rgba(255,0,255,1);
}
#div3{
width: 60px;
height: 60px;
background-color: rgba(255,255,0,1);
}
#heading{
font-size: 20px;
margin: 50px,0px,0px,50xp;
}
footer{
color: white;
height: 50px;
background-color: black;
}
Output
<!-- add border to all the div -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>Q2</title>
</head>
<body>
<div >div1</div>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<div>div1</div>
</body>
</html>
7.css
div{
width: 50px;
height: 50px;
border:8px solid red;
border-radius: 5px;
}
Output
7.html
<!-- add a different background color to each div with an opacity of 0.5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>Q2</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div1</div>
<div id="div3">div1</div>
<div id="div4">div1</div>
<div id="div5">div1</div>
</body>
</html>
7.css
#div1{
background-color: rgba(255,0,255,.5);
}
#div2{
background-color: rgba(0,255,255,.5);
}
#div3{
background-color: rgba(255,255,0,.5);
}
#div4{
background-color: rgba(1, 255, 192, 0.5);
}
#div5{
background-color: rgba(25,40,25,.5);
}
Ouput
Level 3
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="7.css">
<title>Document</title>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
Output
7.Html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="y.css">
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
</body>
</html>
y.css
#div1{
width: 50px;
height: 50px;
background-color : #0000ff;
font-size: 10px;
}
#div2{
width: 100%;
height: 50%;
background-color: #ff0000;
font-size: 2em;/*font size double ho jata haia or 3e tp tripple ho jata hai*/
}
Output
7.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="y.css">
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
</body>
</html>
y.css
#div1{
width: 50px;
height: 50px;
background-color : #0000ff;
font-size: 10px;
}
#div2{
width: 5em;/*20*5=100px;*/
height: 50%;
background-color: #ff0000;
font-size: 2em;/*20px*/
}
Output